<template>
    <div class="wait-car">
        <div class="wait-title" v-if="!isGuide">
            免费等待时长
            <span>14:56:40</span>
            <span class="cancel" @click="cancelOrder">取消订单</span>
        </div>
        <use-car-info v-if="isGuide"></use-car-info>
        <div id="waitcar">
            <div class="waitcar">
                <div class="cardetail">
                    <img src="" alt="" class="carpic">
                    <p>京Q0T8K3</p>
                    <img src="" alt="" class="elet">
                    <p>250公里</p>
                    <p class="wait-car-guide" v-if="isGuide" @click="showGuide()">驾驶指南</p>
                </div>
                <div class="parkdetail">
                    <div class="top">
                        <span></span>
                        <p>取车点</p>
                        <p>银河SOHO西侧地面停车场</p>
                    </div>
                    <div class="parklocation">北京市东城区南竹杆胡同银河SOHO西侧地面停车场</div>
                </div>
            </div>
        </div>
        <div class="usecarbg">
            <div class="whistle" v-if="!isGuide">
                <span class="sound"></span>
                <span>鸣笛</span>
            </div>
            <div class="wait-car-pic wait-car-whistle" v-if="isGuide"></div>
            <div class="wait-car-pic wait-car-lock" v-if="isGuide"></div>
            <div class="wait-car-pic wait-car-unlock" v-if="isGuide"></div>
            <div class="usercar" :class="{width320: isGuide}" v-html="usercar"></div>
        </div>
        <!-- 导引弹窗 -->
        <div class="wait-car-model" v-show="modelVisible">
            <!-- 取消订单 -->
            <div class="cancel-content" v-show="cancelOrderVisible">
                <img src="" alt="">
                <h2>取消订单</h2>
                <p>您当日还剩 <span v-text="cancelCount"></span> 次订单取消机会，超出则无法用车。</p>
                <button type="button" class="btn-yes" @click="cancelOrderYes">取消订单</button>
                <button type="button" class="btn-no" @click="cancelOrderNo">继续用车</button>
            </div>
            <!-- 用车引导 -->
            <div class="guide-content" v-show="guideVisible">
                <div class="guide-text .guide-text2">
                    <div class="guide-text-left" v-html="guideLeft"><span></span></div>
                    <div class="guide-text-right">我知道了</div>
                </div>
                <div class="bottom-pointer bottom-pointer3"></div>
                <div class="guide-point"></div>
            </div>
        </div>
    </div>
</template>
<script>
    import UseCarInfo from "../components/UseCarInfo"
    export default{
        components: {
            UseCarInfo,
        },
        methods: {
            cancelOrder () {
                this.modelVisible = true;
                this.cancelOrderVisible = true;
            },
            cancelOrderYes () {
                this.cancelOrderVisible = false;
                this.modelVisible = false;
            },
            cancelOrderNo () {
                this.cancelOrderVisible = false;
                this.modelVisible = false;
            },
            showGuide () {
                this.modelVisible = true;
                this.guideVisible = true;
            },
        },
        data () {
            return {
                isGuide: true,
                // isGuide: false,
                guideVisible: false,
                guideLeft: "行程中您也可以使用 <span>鸣笛寻车</span>",
                usercar: "开始用车",
                usercar: "还车",

                // 弹窗
                modelVisible: false,
                // 取消订单
                cancelOrderVisible: false,
                cancelCount: 3,

                // 按钮信息
                listdata: [{"location": "西单", "park": "北京市东城区南竹杆胡同银河SOHO西侧地面停车场"}, {"location": "西单", "park": "北京市东城区南竹杆胡同银河SOHO西侧地面停车场"}, {"location": "西单", "park": "北京市东城区南竹杆胡同银河SOHO西侧地面停车场"}]
            }
        },
    }
</script>
<style lang="scss">
    @import "../style/scss/waitcar";
</style>
